<template>
  <div class="resource">
    <el-card shadow="hover">
      <div style="margin-bottom: 10px;">
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <div style="display: inline-block; margin-left: 20px;" v-if="openFlag">
          <el-button
            @click="search"
            icon="el-icon-search"
            size="small"
            type="primary"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-folder-opened"
            type="cyan"
            size="small"
            @click="openSearch"
            >展开</el-button
          >
          <el-button @click="cancelData" icon="el-icon-refresh" size="small"
            >重置</el-button
          >
        </div>
        <div style="display: inline-block; margin-left: 20px;" v-if="!openFlag">
          <el-button
            @click="search"
            icon="el-icon-search"
            type="primary"
            size="small"
            >搜索</el-button
          >
          <el-button
            @click="openSearch"
            icon="el-icon-folder-opened"
            type="cyan"
            size="small"
            >收起</el-button
          >
          <el-button @click="cancelData" icon="el-icon-refresh" size="small"
            >重置</el-button
          >
        </div>
      </div>
      <el-row :gutter="20">
        <el-form
          ref="params"
          :model="params"
          label-width="130px"
          size="small"
          class="searchForm"
        >
          <el-col :span="6">
            <el-form-item label="订单编号:" prop="orderSn">
              <el-input
                v-model="params.orderSn"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书名称:" prop="certificateName">
              <el-input
                v-model="params.certificateName"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系电话:"
              prop="dockingPhone"
            >
              <el-input
                v-model="params.dockingPhone"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="咨询服务:" prop="state">
              <el-select
                v-model="params.consult"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in consultList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="咨询费支付:" prop="state" v-if="!openFlag">
              <el-select
                v-model="params.consultState"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in consultListStates"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="咨询公司:" prop="companyName" v-if="!openFlag">
              <el-input
                v-model="params.companyName"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="审批状态:" prop="completeMaterial">
              <el-select
                v-model="params.completeMaterial"
                placeholder="请选择"
                clearable
                @change="search"
              >
                <el-option
                  v-for="item in checkOptions11"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->

          <el-col :span="6">
            <el-form-item label="对接人:" prop="dockingPeople" v-if="!openFlag">
              <el-input
                v-model="params.dockingPeople"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          
          <!-- <el-col :span="8">
            <el-form-item label="物流单号:" prop="wuLiu" v-if="!openFlag">
              <el-input
                v-model="params.wuLiu"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item
              label="电子证书出证日期:"
              v-if="!openFlag"
              prop="createTime"
            >
              <el-date-picker
                v-model="params.edHisDate"
                type="date"
                placeholder="选择日期"
                @change="search"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="纸质证书出证日期:"
              v-if="!openFlag"
              prop="createTime"
            >
              <el-date-picker
                v-model="params.paperHisDate"
                type="date"
                placeholder="选择日期"
                @change="search"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <div class="container">
      <el-table
        max-height="550"
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column label="订单编号" align="center" min-width="200" fixed>
          <template slot-scope="scope">
            <span
              class="blue"
              style="text-decoration: underline; margin-left: 5px"
              @click="handleEdit(scope.$index, scope.row)"
              >{{ scope.row.orderSn }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="certificateName"
          label="证书名称"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
          fixed
        ></el-table-column>
        <el-table-column label="规格说明" align="center" min-width="180" fixed>
          <template slot-scope="scope">
            {{ scope.row.specName }}
          </template>
        </el-table-column>
        <el-table-column label="是否咨询" align="center" width="150">
          <template slot-scope="scope">
            {{ status_consult(scope.row.consult) }}
          </template>
        </el-table-column>
        <el-table-column label="咨询费是否支付" align="center" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.consultState=='0'">未支付</span>
            <span v-else style="color:blue">已支付</span>
          </template>
        </el-table-column>
        <el-table-column
          label="咨询公司"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="dockingPeople"
          label="对接人"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="dockingPhone"
          label="联系电话"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column label="营业执照" min-width="150" align="center">
          <template slot-scope="scope">
            <img
              v-if="scope.row.businessLicense != null"
              class="study_pic"
              :src="showUrl + JSON.parse(scope.row.businessLicense)[0]"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="出证日期(电子)" align="center" width="155">
          <template slot-scope="scope">
            {{ formatT(scope.row.edHisDate) }}
          </template>
        </el-table-column>
        <el-table-column label="出证日期(纸质)" align="center" width="155">
          <template slot-scope="scope">
            {{ formatT(scope.row.paperHisDate) }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{ status(scope.row.state) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="支付方式" align="center" min-width="150">
          <template slot-scope="scope">
            <span class="green" v-if="scope.row.payType == 1">微信支付</span>
            <span class="blue2" v-if="scope.row.payType == 2">支付宝支付</span>
            <span class="yellow" v-if="scope.row.payType == 3">零钱支付</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="price"
          label="订单金额"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="接单老师"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.teacherName }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="审批状态"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{formatState(scope.row.completeMaterial)}}
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          prop="wuLiu"
          label="物流单号"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column> -->
        <el-table-column
          prop="remarks"
          label="备注说明"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="创建时间" align="center" min-width="160">
          <template slot-scope="scope">{{
            formatT(scope.row.createTime)
          }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="245"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.consult == 1"
              @click="handleCheck(scope.$index, scope.row)"
              >材料</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.consult == 2"
              @click="downLoadPaper(scope.row.materialZip)"
              >下载
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.consult == 1"
              @click="handleDownload(scope.$index, scope.row)"
              >下载</el-button
            >
            <el-button
              type="text"
              @click="handleUpload(scope.$index, scope.row)"
              >上传
            </el-button>
            <el-button
              type="text"
              @click="handleProcess(scope.row)"
              >流程
            </el-button>
            <el-button 
            @click="handlePass(scope.row)"
            type="text">
              指派老师
            </el-button>
            <!-- <el-button
              type="text"
              @click="handleRecord(scope.$index,scope.row)"
              v-if="scope.row.completeMaterial != 1"
            >
              记录
            </el-button> -->
            <!-- <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </div>

    <!-- 审批记录 -->
    <el-dialog title="审批记录" :visible.sync="recordDialogVisible" width="60%">
      <el-table :data="recordList" style="width: 100%" border>
        <el-table-column label="审批结果" width="140" align="center">
          <template slot-scope="scope">
            {{ formatState(scope.row.state) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="暂缺材料"
          min-width="280"
          align="center"
          :formatter="queshi"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="teacherName"
          label="审批老师"
          width="150"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="审批时间"
          prop="createTime"
          align="center"
          width="155"
        >
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="recordTotal > 0"
          :total="recordTotal"
          :page.sync="params11.pageNum"
          :limit.sync="params11.pageSize"
          @pagination="getRecordData"
        />
      </div>
    </el-dialog>

    <!-- 勾选需上传材料 -->
    <el-dialog
      :title="checkTitle"
      :visible.sync="checkDialogVisible"
      width="800px"
    >
      <el-form
        :rules="rules3"
        ref="formData3"
        :model="formData3"
        label-width="100px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="所需材料：">
              <el-checkbox-group
                @change="handleCheckedChange"
                v-model="checkedGroups"
              >
                <el-checkbox
                  v-for="(item, index) in materialSciences"
                  :label="item.id"
                  :key="index"
                  >{{ item.materialName }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="check(2)" type="primary" size="small">材料齐全</el-button>
        <el-button @click="check(3)" type="warning" size="small">材料缺失</el-button> -->
        <el-button @click="check(4)" type="primary" size="medium"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 平台审核通过并选择机构、提交成交价 -->
    <el-dialog title="审批通过" :visible.sync="selectJigouVisible" width="40%">
      <el-form
        ref="selectJigouForm"
        :model="selectJigouForm"
        label-width="130px"
        :rules="selectJigouRules"
      >
        <el-form-item label="咨询老师选择" prop="teacherId">
          <el-select
            v-model="selectJigouForm.teacherId"
            filterable
            placeholder="请选择咨询老师"
            clearable
            style="width:360px"
          >
            <el-option
              v-for="item in teacherLists"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            <span style="float: left">{{ item.userName }}</span>
            <span style="float: right;">{{ item.phonenumber }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel_teacher">取 消</el-button>
        <el-button type="primary" @click="submit_teacher">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible" width="800px">
      <el-form
        ref="formData"
        :model="formData"
        label-width="140px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单编号" prop="orderSn">
              <el-input v-model="formData.orderSn" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询公司" prop="companyName">
              <el-input
                v-model="formData.companyName"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书名称" prop="certificateName">
              <el-input v-model="formData.certificateName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格:" prop="specName">
              <el-input v-model="formData.specName" disabled></el-input>
              <!-- <span>{{formData.specName}}</span> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对接人" prop="dockingPeople">
              <el-input
                v-model="formData.dockingPeople"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="dockingPhone">
              <el-input
                v-model="formData.dockingPhone"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="电子证书出证时间" prop="edHisDate">
              <!-- <span>{{formData.edHisDate}}</span> -->
              <el-date-picker
                v-model="formData.edHisDate"
                type="date"
                placeholder="选择出证日期"
                value-format="yyyy-MM-dd"
                :disabled="editFlags"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纸质证书出证时间" prop="paperHisDate">
              <!-- <span>{{formData.paperHisDate}}</span> -->
              <el-date-picker
                v-model="formData.paperHisDate"
                type="date"
                placeholder="选择出证日期"
                value-format="yyyy-MM-dd"
                :disabled="editFlags"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业执照" prop="businessLicense">
              <!-- <img :src="imgUrl + formData.businessLicense" class="avatar" /> -->
              <div
                v-for="(item, index) in formData.businessLicense"
                :key="index"
                class="avatar1"
              >
                <viewer>
                <img :src="showUrl + item" alt="" width="200" height="180" />
                </viewer>

              </div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="订单状态" prop="state">
              <el-select
                v-model="params.state"
                filterable
                placeholder="请选择"
                clearable
                :disabled="editFlags"
              >
                <el-option
                  v-for="item in stateOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式" prop="payType">
              <span class="green" v-if="formData.payType == 1">微信支付</span>
              <span class="blue2" v-if="formData.payType == 2">支付宝支付</span>
              <span class="yellow" v-if="formData.payType == 3">零钱支付</span>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="订单金额" prop="payMoney">
              <el-input v-model="formData.price" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="物流单号" prop="wuLiu">
              <el-input
                v-model="formData.wuLiu"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付时间" prop="payTime">
              <el-input v-model="formData.payTime" disabled></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                :rows="6"
                type="textarea"
                v-model="formData.remarks"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="title666 == '编辑订单'">
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
        <el-button @click="submitForm" type="primary" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 下载材料 -->
    <el-dialog
      title="材料清单"
      :visible.sync="downloadDialogVisible"
      width="60%"
    >
      <el-form>
        <div v-for="item in downloadList" :key="item.id">
          <el-form-item :label="item.fileName" label-width="120px">
            <!-- <el-input type="textarea" autosize v-model="item.format"></el-input> -->
            <div v-if="item.path!=''">
              <div v-for="i in JSON.parse(item.path)" :key="i" >
                <a :href="'https://9001rzsxy.oss-cn-beijing.aliyuncs.com' + i.url"
                  >{{ i.name }} -- <span style="color:#1890ff;">点击下载</span></a
                >
              </div>
            </div>
          </el-form-item>
        </div>
        <el-form-item label="材料压缩包(机构)" v-if="zip_jigou">
          <a
            :href="
              'https://9001rzsxy.oss-cn-beijing.aliyuncs.com' + zip_jigou[0].url
            "
            >{{ zip_jigou[0].name }} --
            <span style="color:#1890ff;">点击下载</span></a
          >
        </el-form-item>
        <!-- <el-form-item label="材料压缩包(客户)" v-if="zip_kehu">
          <a :href="'https://9001rzsxy.oss-cn-beijing.aliyuncs.com' + zip_kehu[0].url">{{zip_kehu[0].name}} -- <span style="color:#1890ff;">点击下载</span></a>
        </el-form-item> -->
      </el-form>
    </el-dialog>

    <!-- 上传压缩包 -->
    <el-dialog
      title="材料整理上传"
      :visible.sync="uploadDialogVisible"
      width="40%"
    >
      <el-form>
        <el-form-item label="材料压缩包(机构)：" v-if="OrderForm.consult == 1">
          <el-button size="mini" type="primary" @click="tijiao1" style="float:right">提交</el-button>
          <el-upload
            class="upload-demo"
            :headers="headers"
            :action="`${baseUrl}/goods/order/file/upload`"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="1"
            :on-exceed="handleExceed"
            multiple
            :file-list="fileList"
          >
            <el-button size="mini" type="text">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="材料压缩包(客户)：" v-if="OrderForm.consult == 1">
          <el-button size="mini" type="primary" @click="tijiao2" style="float:right">提交</el-button>
          <el-upload
            class="upload-demo"
            :headers="headers"
            :action="`${baseUrl}/goods/order/file/upload`"
            :on-remove="handleRemove1"
            :on-success="handleSuccess1"
            :on-exceed="handleExceed"
            :limit="1"
            multiple
            :file-list="fileList1"
          >
            <el-button  size="mini" type="text">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="客户已打印凭证：">
          <el-button size="mini" type="primary" @click="tijiao3" style="float:right">提交</el-button>
          <el-upload
            class="avatar-uploader"
            :action="baseUrl + '/goods/order/image/upload'"
            :show-file-list="false"
            :headers="headers"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="printImg && printName != 'mp4'"  :src="showUrl + printImg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="printImg && printName == 'mp4'" label="视频凭证预览：">
          <video controls autoplay style="width:600px" :src="showUrl + printImg"></video>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUpload" size="medium">取消</el-button>
        <el-button @click="uploadMaterial" type="primary" size="medium"
          >确定</el-button
        >
      </span> -->
    </el-dialog>
    <!-- 流程查看 -->
    <el-dialog title="流程查看" :visible.sync="dialogVisible1010" width="800px">     
      <div class="progress_box" v-for="(item,index) in steps" :key="index">
				<div class="left_c" v-if="item.finish == 1">已完成</div>
				<div class="left" v-if="item.finish == 0">处理中</div>
				<div class="center">
          <i class="el-icon-star-on" style="color:#000" v-if="item.finish == 1"></i>
          <i class="el-icon-star-on" style="color:#888" v-if="item.finish == 0"></i>
				</div>
				<!-- <div class="right_c"> -->
				<div :class="[item.finish==1?'right_c':'right']">
					<div class="top88" v-if="item.finish == 1">
						<span class="time88">{{item.updateTime}}</span>
						<span
              class="loading88"
              v-if="item.accessory && item.flowSerial != 18"
              @click="downLoadPaper(item.accessory)"
              >下载附件</span
            >
            <span
              class="loading88"
              v-if="item.accessory && item.flowSerial == 18"
              @click="ViewCert(item.accessory)"
              >预览证书</span
            >
					</div>
					<div class="title88">[{{item.flowName}}]</div>
					<div class="desc88" v-if="item.finish == 1 && item.context">{{item.context}}</div>
				</div>
			</div>
    </el-dialog>
  </div>
</template>

<script>
import { list } from "@/api/materialScience/materialScience";
import {
  orderReceive_List1,
  updateOrder,
  checkTeacher,
  checkMaterial,
  record,
  getMaterial,
  updateProcess,
  queryProcess
} from "@/api/order/orderReceiveAds";
import { certificateList } from "@/api/certificate/certificateAds";
import { teacherList,checkTeacherList } from "@/api/teacher/teacherAds";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  props: [],
  data() {
    return {
      steps:[],
      dialogVisible1010: false,
      consultList: [
        { id: 1, title: "需咨询" },
        { id: 2, title: "不咨询" }
      ],
      consultListStates: [
        { id: '0',title: '未支付' },
        { id: '1',title: '已支付' }
      ],
      // 上传
      uploadDialogVisible: false,
      selectJigouVisible: false,
      printName:'',
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,
      fileList: [],
      fileList1: [],
      OrderForm: {},
      // 下载
      downloadDialogVisible: false,
      downloadList: {},
      isUpload: false, // 判断用户是否上传材材料
      zip_jigou: null,
      zip_kehu: null,
      // 记录
      recordDialogVisible: false,
      recordList: [],
      params11: {
        pageNum: 1,
        pageSize: 10
      },
      recordTotal: 0,
      // 公司类型
      // companyTypes: [],
      // 管理体系
      certificationSystems: [],
      // 材料列表
      materialSciences: [],
      checkedGroups: [], // 选择材料框
      MaterialOptions: [],
      checkTitle: "",
      checkDialogVisible: false,
      formData3: {},
      formData4: {},
      rules3: {
        enterpriseType: [
          { required: true, message: "请选择公司类型", trigger: "blur" }
        ],
        architecture: [
          { required: true, message: "请选择管理体系", trigger: "blur" }
        ]
      },
      teacherId: undefined,
      teacherLists: [],
      dialogVisible_teacher: false,
      cateList2: [],
      // 非多个禁用
      multiple: true,
      //删除
      ids: [],
      headers: { Authorization: "Bearer " + getToken() },
      upImage: process.env.VUE_APP_BASE_API,
      examineList: [
        {
          id: 0,
          title: "取消订单"
        },
        {
          id: 1,
          title: "待付款"
        },
        {
          id: 2,
          title: "已付款,待接单"
        },
        {
          id: 3,
          title: "已接单"
        },
        {
          id: 4,
          title: "处理中"
        },
        {
          id: 5,
          title: "已出证,待发货"
        },
        {
          id: 6,
          title: "待收货"
        },
        {
          id: 7,
          title: "确认收货"
        },
        {
          id: 8,
          title: "订单完结"
        }
      ],
      checkOptions11: [
        {
          id: 1,
          title: "待审批"
        },
        {
          id: 3,
          title: "材料残缺"
        }
      ],
      checkOptions: [
        {
          id: 1,
          title: "待审批"
        },
        {
          id: 2,
          title: "材料齐全"
        },
        {
          id: 3,
          title: "材料残缺"
        }
      ],

      stateOptions: [
        {
          id: 2,
          title: "已付款，待提交"
        },
        {
          id: 3,
          title: "已接单"
        },
        {
          id: 4,
          title: "处理中"
        },
        {
          id: 5,
          title: "已出证，待发货"
        },
        {
          id: 6,
          title: "待发货"
        },
        {
          id: 7,
          title: "确认收货"
        },
        {
          id: 8,
          title: "订单完结"
        }
      ],
      title666: "",
      rules2: {
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        linkman: [
          { required: true, message: "请输入联系人名称", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传图片", trigger: "blur" }
        ]
      },
      input: "",
      openFlag: true,
      loading: true,
      //数据
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        position: 1,
        state: 4
        // teacherId: localStorage.getItem('useId')
      },
      selectJigouForm: {},
      pageTotal: 0,
      dialogVisible: false, // 是否展示编辑页面
      // 新增/编辑数据
      formData: {
        businessLicense: ""
      },
      customer: {
        customerId: ""
      },
      paramsFlag: 0,
      editFlags: true,
      printImg: "",
      material_process: []
    };
  },
  computed: {},
  created() {
    // this.getCateList();
    this.getTeacherData();
    this.getData00();
  },
  mounted() {
    this.changeType();
  },
  watch: {},
  methods: {
    // 点击查看流程
    handleProcess(row){
      queryProcess({
        orderId: row.id
      }).then(res => {
        if(res.code == 200){
          res.rows[6].flowName='咨询老师做材料并上传-企业';
          res.rows[7].flowName='咨询老师做材料并上传-机构';
          this.steps = res.rows;
          this.dialogVisible1010 = true;
        }
      })
    },
    // 审批通过
    handlePass(row) {
      this.selectJigouForm = {};
      this.selectJigouForm = row;
      this.selectJigouVisible = true;
    },
    cancel_teacher() {
      this.selectJigouVisible = false;
      this.selectJigouForm = {};
      this.getData00();
    },
    submit_teacher() {
      // this.$refs["selectJigouForm"].validate(valid => {
        // if (valid) {
          // this.selectJigouForm.state = 4;
          updateOrder(this.selectJigouForm).then(res => {
            if (res.code == 200) {
                checkTeacher({
                  teacherId: this.selectJigouForm.teacherId,
                  orderId: this.selectJigouForm.id
                }).then(res => { 
                  if(res.code == 200){
                    this.$message.success('修改成功')
                    this.getData00()
                    this.selectJigouVisible = false;
                  }
                })
              // }
            }
          });
        // }
      // });
    },
    status_consult(val) {
      let str = this.consultList.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    getTeacherData(){
      checkTeacherList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.teacherLists = res.data;
      })
    },
    // 点击下载附件
    downLoadPaper(val) {
      // console.log(val,'查询下载附件')
      let value = JSON.parse(val);
      let that = this;
      value.forEach(item => {
        this.downloadFile(item.url);
      });
    },
    downloadFile(url) {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none"; // 防止影响页面
      iframe.style.height = 0; // 防止影响页面
      iframe.src = this.showUrl + url;
      document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
      // 1分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
      setTimeout(() => {
        iframe.remove();
      }, 1 * 60 * 1000);
    },
    // 触发流程
    process(id, flowSerial, context, accessory) {
      updateProcess({
        orderId: id,
        flowSerial: flowSerial,
        context: context,
        accessory: accessory,
        finish: 1,
        flowList:[{
          orderId: id,
          flowSerial: flowSerial,
          context: context,
          accessory: accessory,
          finish: 1,
        }],
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getData00();
        }
      });
    },
    tijiao1(){
      let materialZip =
          this.fileList.length >= 1 ? JSON.stringify(this.fileList) : "";
        console.log("上传给机构的", materialZip);
        if(!materialZip){
          this.$message.error('请上传材料！')
          return false
        };
        updateOrder({
          id:this.OrderForm.id,
          materialZip:materialZip
        }).then(res => {
          if (res.code == 200) {
            this.process(this.OrderForm.id, 7.5, "", materialZip);
            this.uploadDialogVisible = false;
          }
        });
    },
    tijiao2(){
      let materialZipTerminal =
          this.fileList1.length >= 1 ? JSON.stringify(this.fileList1) : "";
        console.log("上传给终端", materialZipTerminal);
        if(!materialZipTerminal){
          this.$message.error('请上传材料！')
          return false
        };
        updateOrder({
          id:this.OrderForm.id,
          materialZipTerminal:materialZipTerminal
        }).then(res => {
          if (res.code == 200) {
            this.process(this.OrderForm.id, 7, "", materialZipTerminal);
            this.uploadDialogVisible = false;
          }
        });
    },
    tijiao3(){
      let file = [];
      let obj = {};
      obj.url = this.printImg;
      file.push(obj);
      updateOrder({
        id: this.OrderForm.id,
        printPicture: JSON.stringify(file)
      }).then(res => {
        if (res.code == 200) {
          this.process(this.OrderForm.id,12, "", JSON.stringify(file));
          this.process(this.OrderForm.id,12,"","");
          this.uploadDialogVisible = false;
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    handleAvatarSuccess(res) {
      console.log(res,'------')
      if(res.code==200){
        this.printImg = res.data;
        // 获得文件后缀名
        if(this.printImg != ''){
          var fileIndex = this.printImg.lastIndexOf(".");
          var name = this.printImg.substring(fileIndex + 1, this.printImg.length);
          this.printName = name
        }
          console.log(this.printImg)
        this.$message.success('上传成功')
      }
    },
    // 点击上传按钮
    handleUpload(index, row) {
      this.uploadDialogVisible = true;
      // this.fileList = [];
      this.fileList = row.materialZip?JSON.parse(row.materialZip):[];
      // this.fileList1 = [];
      this.fileList1 = row.materialZipTerminal?JSON.parse(row.materialZipTerminal):[];
      this.printImg = row.printPicture?JSON.parse(row.printPicture)[0].url:'';
      // 获得文件后缀名
      if(this.printImg != ''){
        var fileIndex = this.printImg.lastIndexOf(".");
        var name = this.printImg.substring(fileIndex + 1, this.printImg.length);
        console.log(name)
        this.printName = name
      }

      // this.printImg = "";
      this.OrderForm = row;

      console.log(row)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制仅可上传 1 个文件`);
    },
    handleRemove(file) {
      this.fileList.forEach((item, i) => {
        if (item.url == file.url) {
          this.fileList.splice(i, 1);
        }
      });
    },
    handleRemove1(file) {
      this.fileList1.forEach((item, i) => {
        if (item.url == file.url) {
          this.fileList1.splice(i, 1);
        }
      });
    },
    handleSuccess(res, file) {
      if (res.code == 200) {
        this.fileList.push({
          name: file.name,
          url: res.data
        });
      this.$message.success('文件上传成功')
      }
    },
    handleSuccess1(res, file) {
      if (res.code == 200) {
        this.fileList1.push({
          name: file.name,
          url: res.data
        });
      this.$message.success('文件上传成功')
      }
    },
    cancelUpload() {
      this.uploadDialogVisible = false;
      this.fileList = [];
      this.fileList1 = [];
    },
    uploadMaterial() {
      this.OrderForm.materialZip =
        this.fileList.length >= 1 ? JSON.stringify(this.fileList) : "";
      this.OrderForm.materialZipTerminal =
        this.fileList1.length >= 1 ? JSON.stringify(this.fileList1) : "";
      updateOrder(this.OrderForm).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功!");
          this.getData00();
          this.uploadDialogVisible = false;
        }
      });
    },
    // 点击下载按钮
    handleDownload(index, row) {
      console.log(row,'===row==')
      getMaterial({
        orderId: row.id
      }).then(res => {
        console.log(res,'请求结果')
        // 判断只有客户上传了材料才可以查看可下载材料
        if (res.total == 0) {
          this.isUpload = false;
          this.$message.warning("客户暂未上传材料！");
        } else {
          console.log(row.materialZip,'-----材料清单----')
          this.zip_jigou = JSON.parse(row.materialZip);
          this.isUpload = true;
          this.downloadDialogVisible = true;
        }
        this.downloadList = res.rows;
      });
    },
    // 用于审批记录formatter回显
    queshi(row) {
      let arr6 = [];
      // 字符串转数组
      arr6 = row.materialName.split(",");
      let arr8 = [];
      // console.log(arr6);
      // 一级循环参照
      for (let i = 0; i < this.materialSciences.length; i++) {
        // 二级循环赋值
        for (let j = 0; j < arr6.length; j++) {
          if (this.materialSciences[i].id == arr6[j]) {
            arr8.push(this.materialSciences[i].materialName);
          }
        }
      }
      return arr8.join(",");
    },
    handleRecord(index, row) {
      this.getRecordData(row.id);
      this.recordDialogVisible = true;
    },
    getRecordData(id) {
      record(id).then(res => {
        if (res.code == 200) {
          // console.log(res,'老师记录------------')
          this.recordList = res.rows;
          this.recordTotal = res.total;
        }
      });
    },

    formatState(val) {
      var str1 = this.checkOptions.find(function(item) {
        return item.id == val;
      });
      if (str1) return str1.title;
    },
    status(val) {
      var str = this.examineList.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    // 获取材料列表
    changeType() {
      list({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.materialSciences = res.rows;
          // console.log(this.materialSciences);
        }
      });
    },
    // 多选框监测
    handleCheckedChange(e) {
      this.material_process = [];
      this.checkedGroups = e;
      this.checkedGroups.forEach(item => {
        this.materialSciences.forEach(i => {
          if (item == i.id) {
            return this.material_process.push(i.materialName);
          }
        });
      });
    },
    // 审批
    check(e) {
      let state = e;
      this.formData3.state = state;
      if (this.checkedGroups.length >= 1) {
        checkMaterial({
          state: this.formData3.state,
          orderId: this.formData3.orderId,
          material: this.checkedGroups.join(",")
        }).then(res => {
          if (res.code == 200) {
            this.process(
              this.formData3.orderId,
              5,
              this.material_process.join(","),
              ""
            );
            this.checkDialogVisible = false;
          }
        });
      } else {
        this.$message.error("请勾选材料！");
      }
    },
    // 查询证书类别列表
    getCateList() {
      this.loading = true;
      certificateList({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.cateList2 = res.rows;
          // this.cateList = res.rows;
        } else {
          this.msgError("查询失败！");
        }
      });
    },
    querySearch(queryString, cb) {
      console.log(queryString, this.cateList2);
      var restaurants = this.cateList2;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.categoryName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 键值配对
    status(val) {
      var str = this.examineList.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    // 键值配对
    status2(val) {
      var str = this.cateList2.find(function(item) {
        return item.id == val;
      });
      if (str) return str.categoryName;
    },
    // 新增修改的方法
    submitForm() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          updateOrder(this.formData).then(res => {
            if (res.code == 200) {
              this.$message.success("保存成功");
              this.dialogVisible = false;
              this.formData = {};
              this.getData00();
            } else {
              this.$message.error("保存失败");
              this.dialogVisible = false;
              this.getData00();
            }
          });
        }
      });
    },
    // 打开搜索
    openSearch() {
      this.openFlag = !this.openFlag;
    },
    // 重置搜索框
    cancelData() {
      this.resetForm("params");
      this.getData00();
    },
    handleAdd() {
      this.formData = {
        businessLicense: ""
      };
      this.dialogVisible = true;
      this.title666 = "新增";
    },
    // 点击审批订单
    handleCheck(index, row) {
      this.formData4 = {};
      this.formData4 = row;
      this.formData3 = {};
      this.formData3.orderId = row.id;
      // 审批回显 有值转换 无值为空
      if (row.materialLists) {
        this.checkedGroups = row.materialLists;
      } else {
        this.checkedGroups = [];
      }
      this.checkDialogVisible = true;
      this.checkTitle = "材料清单";
    },
    handleEdit(index, row) {
      let rowCopy = JSON.parse(JSON.stringify(row));
      this.formData = rowCopy;
      this.formData.businessLicense = JSON.parse(row.businessLicense);
      this.editFlags = true;
      this.dialogVisible = true;
      this.title666 = "查看";
    },
    handleEditOrder(index, row) {
      this.editFlags = false;
      let rowCopy = JSON.parse(JSON.stringify(row));
      this.formData = rowCopy;
      this.formData.businessLicense = JSON.parse(row.businessLicense);
      this.dialogVisible = true;
      this.title666 = "编辑订单";
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    // 删除操作
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
      this.single = val.length != 1;
      this.multiple = !val.length;
    },
    // 批量删除
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return company_delete(id);
        })
        .then(() => {
          this.getData00();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    //获取数据
    getData00() {
      orderReceive_List1(this.params).then(res => {
        if (res.code == "200") {
          this.tableData = res.rows;
          this.pageTotal = res.total;
          this.loading = false;
        }
      });
    },
    // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getData00();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.params, "pageNum", val);
      this.getData00();
    }
  }
};
</script>

<style>
.resource {
  padding: 30px;
}
.container {
  margin-top: 20px;
}
.handle-box {
  margin-bottom: 10px;
}

.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue2 {
  color: #409eff;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}

.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
.study_pic {
  display: block;
  width: 100px;
  height: 85px;
  margin: auto;
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.avatar1 {
  width: 148px;
  height: 148px;
  display: inline-block;
  margin-right: 80px;
}
.progress_box{
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px 30px;
  margin: 0 auto;
  justify-content: space-between;
  background-color: #fff;
  /* align-items: center; */
}
.progress_box .left{
  width: 15%;
  color: #888;
  font-size: 14px;
}
.progress_box .left_c{
  width: 15%;
  color: #444;
  font-weight: bold;
  font-size: 14px;
}
.progress_box .right{
  width: 75%;
  color: #888;
  font-size: 14px;
}
.progress_box .right_c{
  width: 75%;
  color: #444;
  font-size: 14px;
}
.progress_box .center{
  width: 10%;
  text-align: center;
  line-height: 1;
  /* display: flex;
  align-items: center; */
}
.top88{
  display: flex;
  align-items: center;
}
.title88{
  display: flex;
  align-items: center;
  margin: 0px 0 10px;
  font-weight: bold;
}
.time88 {
  margin-bottom: 10px;
}
.desc88{
  margin-bottom: 10px;
}
.loading88{
  color: #3D6FFF;
  margin-left: 40px;
  cursor: pointer;
}
</style>
